<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<meta charset="UTF-8">
<!--<meta charset="UTF-8">-->
<div th:replace="crowd/include-head::include-head"></div>
<link href="css/pagination.css" rel="stylesheet"/>
<script type="text/javascript" src="jquery/jquery.pagination.js"></script>
<script type="text/javascript">
    $(function () {
        // 调用专门的函数初始化分页导航条
        initPagination();
    });

    // 声明一个函数用于初始化
    function initPagination() {
        // 获取分页数据中的总记录数
        var totalRecord = '[[${pageInfo.total}]]'; // 声明 Pagination 设置属性的 JSON 对象
        var properties = {
            num_edge_entries: 1, // 边缘页数
            num_display_entries: 5, // 主体页数
            callback: pageSelectCallback, // 用户点击“翻页”按钮之后 执行翻页操作的回调函数
            current_page: '[[${pageInfo.pageNum-1}]]', // 当前页，pageNum 从 1 开始， 必须-1 后才可以赋值 prev_text: "上一页", next_text: "下一页"
            prev_text: "上一页",                                 //在对应上一页操作的按钮上的文本
            next_text: "下一页",                                 //在对应下一页操作的按钮上的文本
            items_per_page:'[[${pageInfo.pageSize}]]' // 每页显示 1 项
        };// 调用分页导航条对应的 jQuery 对象的 pagination()方法生成导航条
        $("#Pagination").pagination(totalRecord, properties);
// 翻页过程中执行的回调函数
// 点击“上一页”、“下一页”或“数字页码”都会触发翻页动作，从而导致当前函数被调 用
// pageIndex 是用户在页面上点击的页码数值
        function pageSelectCallback(pageIndex, jQuery) {
            // pageIndex 是当前页页码的索引，相对于 pageNum 来说，pageIndex 比 pageNum 小 1
            var pageNum = pageIndex + 1;
            // 执行页面跳转也就是实现“翻页”
            window.location.href = "admin/page/page.html?pageNum=" + pageNum + "&keyword=${param.keyword}";
            // 取消当前超链接的默认行为
            return false;
        }
    }
</script>
<body>
<div th:replace="crowd/include-nav::include-nav"></div>
<!--<%@include file="include-nav.jsp" %>-->
<div class="container-fluid">
    <div th:replace="crowd/include-sidebar::include-sidebar"></div>
<!--    <%@include file="include-sidebar.jsp" %>-->

    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

        <div class="panel panel-default">

            <div class="panel-heading">
                <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
            </div>
            <div class="panel-body">
                <form action="/admin/page/page.html" method="post" class="form-inline"
                      role="form" style="float:left;">
                    <div class="form-group has-feedback">
                        <div class="input-group">
                            <div class="input-group-addon">查询条件</div>
                            <input name="keyword" class="form-control has-success" type="text" placeholder="请输入查询条件">
                        </div>
                    </div>
                    <button name="submit" type="submit" class="btn btn-warning"><i
                            class="glyphicon glyphicon-search"></i> 查询
                    </button>
                </form>
                <button type="button" class="btn btn-danger" style="float:right;margin-left:10px;"><i
                        class=" glyphicon glyphicon-remove"></i> 删除
                </button>
                <button type="button" class="btn btn-primary" style="float:right;"
                        onclick="window.location.href='admin/main/add.html'"><i class="glyphicon glyphicon-plus"></i> 新增
                </button>
                <br>
                <hr style="clear:both;">
                <div class="table-responsive">
                    <table class="table  table-bordered">
                        <thead>
                        <tr>
                            <th width="30">#</th>
                            <th width="30"><input type="checkbox"></th>
                            <th>账号</th>
                            <th>名称</th>
                            <th>邮箱地址</th>
                            <th width="100">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                         <div th:if="${pageInfo.list}==null">
                            <tr>
                                <td colspan="6">抱歉，查不到相关的数据！</td>
                            </tr>
                         </div>
                         <div th:if="${pageInfo.list}!=null" th:with="keyword=${param.keyword}">
<!--                        <c:if test="${!empty requestScope.pageInfo.list}">-->
                             <th:block th:each="admin :${pageInfo.list}" varStatus="status">
<!--                            <c:forEach items="${requestScope.pageInfo.list}" var="admin" varStatus="status">-->
                                <tr>
                                    <td th:text="${admin.id}">${status.count}</td>
                                    <td><input type="checkbox"></td>
                                    <td th:text="${admin.loginAcct}">${admin.loginAcct}</td>
                                    <td th:text="${admin.userName}">${admin.userName}</td>
                                    <td th:text="${admin.email}">${admin.email}</td>
                                    <td >
                                        <a th:href="'assign/to/page.html?adminId=' + ${admin.id} + '&pageNum='+${pageInfo.pageNum}+'&keyword='+${keyword}"
                                                href="assign/to/page.html?adminId=${admin.id}&pageNum=${requestScope.pageInfo.pageNum}&keyword=${param.keyword}"
                                           class="btn btn-success btn-xs"><i class=" glyphicon glyphicon-check"></i></a>
<!--                                                             '%20+%20$%7Badmin.id%7D+'/'+$%7BpageInfo.pageNum%7D+'/'$%7Bparam.keyword%7D+'.html'-->
                                        <a  th:href="'admin/page/update/'+ ${admin.id}+'/'+${pageInfo.pageNum}+'/'+${keyword}+'.html'"
                                                href="admin/page/update/${admin.id}/${requestScope.pageInfo.pageNum}/${param.keyword}.html"
                                           class="btn btn-primary btn-xs"><i
                                                class=" glyphicon glyphicon-pencil"></i></a>
                                        <a th:href="'/admin/page/remove/' + ${admin.id}+'/'+${pageInfo.pageNum}+'/'+${keyword}+'.html'"
                                                href="admin/page/remove/${admin.id}/${requestScope.pageInfo.pageNum}/${param.keyword}.html"
                                           class="btn btn-danger btn-xs">
                                            <i class=" glyphicon glyphicon-remove"></i>
                                        </a>
                                    </td>
                                </tr>
<!--                            </c:forEach>-->
                                 <!--                        </c:if>--></th:block>
                         </div>

                        </tbody>
                        <tfoot>
                        <tr>
                            <td colspan="6" align="center">

                                <div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
                            </td>
                        </tr>
                        ,

                        </tfoot>

                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


</body>